<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useFavoritesStore } from '../stores/favorites.js';

const favoritesStore = useFavoritesStore();
const router = useRouter();
const favoriteItems = computed(() => favoritesStore.items);

// 定义导航到商品详情页面的函数
const goToProductDetail = (item) => {
  router.push({
    path: '/Goods',
    query: {
      name:item.name,
      price: item.price,
      description: item.description,
      image: encodeURIComponent(item.image),
      stock:item.stock,
      id:item.id,
  }
  });
};
</script>

<template>
  <div class="new">
    <div class="newCourseContent">
      <ul>
        <li v-for="item in favoriteItems" :key="item.id" class="courseItem" @click="goToProductDetail(item)">
          <div class="courseInfo">
            <div class="courseBg">
              <img :src="item.image" />
            </div>
            <div class="courseName">{{ item.name }}</div>
            <div>{{ item.description }}</div>
            <div class="coursePricePri">{{ item.price }}元</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
.new {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  height: 800px;
}
.null {
  background-color: #f5f5f5;
  height: 52px;
}
.newCourseContent{
  width: 1200px;
  margin: 15px auto 0px auto;
}
.newCourseContent ul{
  display: flex;
  flex-wrap: wrap;
}
.courseItem{
  width: 285px;
  height: 200px;
  margin: 0 20px 20px 0;
  transition: margin-top 0.2s;
  margin-bottom: 90px;
}
.courseItem:hover{
  margin-top: -10px;
  cursor: pointer;
}
.courseItem:nth-child(4n+0){
  margin-right: 0 !important;
}
.courseInfo{
  position: relative;
  width: 100%;
  height: 270px;
  background: #ffffff;
  box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
  opacity: 1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
.courseBg{
  position: relative;
  width: 300px;
  height: 160px;
}
.courseBg img{
  width: 100%;
  height: 100%;
}
.courseName{
  margin: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
}

.coursePricePri{
  width: 75px;
  font-size: 14px;
  margin-top: 5px;
  padding: 0 13px;
  color: rgba(255,114,127,1);
  font-weight: 700;
}
.stock{
  margin-top: 6px;
  color: #8d8b8b;
}
</style>
